<template>
    <div class="bill baoxiao">
        <slide-tab @onTab="onTab" :top="0">
            <div class="tabItem">
                <ul class='tabClick box'>
                    <li class="active">
                        全部
                    </li>
                    <li>未发k2</li>
                    <li>审批中</li>
                    <li>待付款</li>
                    <li>已付款</li>
                    <li>待评价</li>
                </ul>
                <div class='lineBorder'>
                    <div class='lineDiv' :style="{width: 100 / 6 + '%'}"><!--滑动条--></div>
                </div>
            </div>
            <div class='tabCon'>
                <div class='tabBox'>
                    <!--全部-->
                    <div class="tabList">
                        <!--:style="{backgroundImage: 'url('+ stampPass +')'}"-->
                        <div class="card box stamp data1" v-for="(item, index) in list"
                             @click="goToDetail(item.name, item.num || item.FNUMBER, item.cause ||
                             item.FCAUSE, item.state || item.FSTATE, item.amount || item.FAMOUNT, item.FBILLDATE,  getBillIcons(item.name || '差旅报销单', item.expenseType), item.expenseType)">
                            <div class="left">
                                <!-- <div :style="{'background-color': getBillIcon(item.num || item.FNUMBER).bc}" class="bill-icon icon">{{getBillIcon(item.num || item.FNUMBER).text}}</div> -->
                                <img :src="getBillIcons(item.name || '差旅报销单', item.expenseType)" class="icon">
                            </div>
                            <div class="main box-f1">
                                <div class="upper clear">
                                    <div class="title fl">金额：¥{{item.amount || item.FAMOUNT}}</div>
                                    <div class="date fr">{{item.billDate || item.FBILLDATE.substring(0, 10)}}</div>
                                </div>
                                <div class="mid">
                                    <div class="type">单据类型：{{item.name || '差旅报销单'}}</div>
                                </div>
                                <div class="lower clear">
                                    <div class="subtitle fl">{{item.cause || item.FCAUSE}}</div>
                                    <div class="status default fr"
                                         :class="{fail: (item.state == '27' || item.state == '80') ||
                                          (item.FSTATE == '27' || item.FSTATE == '80')}">
                                        {{BILLSTATE[item.state] || BILLSTATE[item.FSTATE]}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div @click="getBaoxiao(2)" class="load-more" v-if="showType === 1 && !$store.state.isLoading">加载全部</div>
                        <empty :flag="empty1"></empty>
                    </div>
                    <div class="tabList">
                        <div class="card box stamp data2" v-for="(item, index) in list"
                             @click="goToDetail(item.name, item.num || item.FNUMBER, item.cause ||
                             item.FCAUSE, item.state || item.FSTATE, item.amount || item.FAMOUNT, item.FBILLDATE,  getBillIcons(item.name || '差旅报销单', item.expenseType), item.expenseType)"
                             v-if="states('未发', item.state || item.FSTATE)">
                            <div class="left">
                                <img :src="getBillIcons(item.name || '差旅报销单', item.expenseType)" class="icon">
                            </div>
                            <div class="main box-f1">
                                <div class="upper clear">
                                    <div class="title fl">金额：¥{{item.amount || item.FAMOUNT}}</div>
                                    <div class="date fr">{{item.billDate || item.FBILLDATE.substring(0, 10)}}</div>
                                </div>
                                <div class="mid">
                                    <div class="type">单据类型：{{item.name || '差旅报销单'}}</div>
                                </div>
                                <div class="lower clear">
                                    <div class="subtitle fl">{{item.cause || item.FCAUSE}}</div>
                                    <div class="status default fr"
                                         :class="{fail: (item.state == '27' || item.state == '80') ||
                                          (item.FSTATE == '27' || item.FSTATE == '80')}">
                                        {{BILLSTATE[item.state] || BILLSTATE[item.FSTATE]}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <empty :flag="empty2"></empty>
                    </div>
                    <div class="tabList">
                        <div class="card box stamp data3" v-for="(item, index) in list"
                             @click="goToDetail(item.name, item.num || item.FNUMBER, item.cause ||
                             item.FCAUSE, item.state || item.FSTATE, item.amount || item.FAMOUNT, item.FBILLDATE,  getBillIcons(item.name || '差旅报销单', item.expenseType), item.expenseType)"
                             v-if="states('审批中', item.state || item.FSTATE)">
                            <div class="left">
                                <img :src="getBillIcons(item.name || '差旅报销单', item.expenseType)" class="icon">
                            </div>
                            <div class="main box-f1">
                                <div class="upper clear">
                                    <div class="title fl">金额：¥{{item.amount || item.FAMOUNT}}</div>
                                    <div class="date fr">{{item.billDate || item.FBILLDATE.substring(0, 10)}}</div>
                                </div>
                                <div class="mid">
                                    <div class="type">单据类型：{{item.name || '差旅报销单'}}</div>
                                </div>
                                <div class="lower clear">
                                    <div class="subtitle fl">{{item.cause || item.FCAUSE}}</div>
                                    <div class="status default fr"
                                         :class="{fail: (item.state == '27' || item.state == '80') ||
                                          (item.FSTATE == '27' || item.FSTATE == '80')}">
                                        {{BILLSTATE[item.state] || BILLSTATE[item.FSTATE]}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <empty :flag="empty3"></empty>
                    </div>
                    <div class="tabList">
                        <div class="card box stamp data4" v-for="(item, index) in list"
                             @click="goToDetail(item.name, item.num || item.FNUMBER, item.cause ||
                             item.FCAUSE, item.state || item.FSTATE, item.amount || item.FAMOUNT, item.FBILLDATE,  getBillIcons(item.name || '差旅报销单', item.expenseType), item.expenseType)"
                             v-if="states('待付款', item.state || item.FSTATE)">
                            <div class="left">
                                <img :src="getBillIcons(item.name || '差旅报销单', item.expenseType)" class="icon">
                            </div>
                            <div class="main box-f1">
                                <div class="upper clear">
                                    <div class="title fl">金额：¥{{item.amount || item.FAMOUNT}}</div>
                                    <div class="date fr">{{item.billDate || item.FBILLDATE.substring(0, 10)}}</div>
                                </div>
                                <div class="mid">
                                    <div class="type">单据类型：{{item.name || '差旅报销单'}}</div>
                                </div>
                                <div class="lower clear">
                                    <div class="subtitle fl">{{item.cause || item.FCAUSE}}</div>
                                    <div class="status default fr"
                                         :class="{fail: (item.state == '27' || item.state == '80') ||
                                          (item.FSTATE == '27' || item.FSTATE == '80')}">
                                        {{BILLSTATE[item.state] || BILLSTATE[item.FSTATE]}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <empty :flag="empty4"></empty>
                    </div>
                    <div class="tabList">
                        <div class="card box stamp data5" v-for="(item, index) in list"
                             @click="goToDetail(item.name, item.num || item.FNUMBER, item.cause ||
                             item.FCAUSE, item.state || item.FSTATE, item.amount || item.FAMOUNT, item.FBILLDATE,  getBillIcons(item.name || '差旅报销单', item.expenseType), item.expenseType)"
                             v-if="states('已付款', item.state || item.FSTATE)">
                            <div class="left">
                                <img :src="getBillIcons(item.name || '差旅报销单', item.expenseType)" class="icon">
                            </div>
                            <div class="main box-f1">
                                <div class="upper clear">
                                    <div class="title fl">金额：¥{{item.amount || item.FAMOUNT}}</div>
                                    <div class="date fr">{{item.billDate || item.FBILLDATE.substring(0, 10)}}</div>
                                </div>
                                <div class="mid">
                                    <div class="type">单据类型：{{item.name || '差旅报销单'}}</div>
                                </div>
                                <div class="lower clear">
                                    <div class="subtitle fl">{{item.cause || item.FCAUSE}}</div>
                                    <div class="status default fr"
                                         :class="{fail: (item.state == '27' || item.state == '80') ||
                                          (item.FSTATE == '27' || item.FSTATE == '80')}">
                                        {{BILLSTATE[item.state] || BILLSTATE[item.FSTATE]}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <empty :flag="empty5"></empty>
                    </div>
                    <div class="tabList">
                        <div class="card box stamp data6" v-for="(item, index) in list"
                             @click="goToDetail(item.name, item.num || item.FNUMBER, item.cause ||
                             item.FCAUSE, item.state || item.FSTATE, item.amount || item.FAMOUNT, item.FBILLDATE,  getBillIcons(item.name || '差旅报销单', item.expenseType), item.expenseType)"
                             v-if="(item.isEvaluat === '0' || item.ISEVALUAT === '0') &&
                             states('待评价', item.state || item.FSTATE, item.billDate || item.FBILLDATE)">
                            <div class="left">
                                <img :src="getBillIcons(item.name || '差旅报销单', item.expenseType)" class="icon">
                            </div>
                            <div class="main box-f1">
                                <div class="upper clear">
                                    <div class="title fl">金额：¥{{item.amount || item.FAMOUNT}}</div>
                                    <div class="date fr">{{item.billDate || item.FBILLDATE.substring(0, 10)}}</div>
                                </div>
                                <div class="mid">
                                    <div class="type">单据类型：{{item.name || '差旅报销单'}}</div>
                                </div>
                                <div class="lower clear">
                                    <div class="subtitle fl">{{item.cause || item.FCAUSE}}</div>
                                    <a @click.stop="gotoComment(item.num || item.FNUMBER,
                                     item.JM || 'CB201')"
                                       class="status comment fr">立即评价</a>
                                </div>
                            </div>
                        </div>
                        <empty :flag="empty6"></empty>
                    </div>
                </div>
            </div>
        </slide-tab>
    </div>
</template>

<script>
    import slideTab from '../components/slideTab.vue';
    import { quickSort } from '../utils/sortArr';
    import empty from '../components/empty.vue';
    import { mapState } from 'vuex';
    import moment from 'moment';
    import axios from 'axios';
    // import { getJMByBillNum } from '../utils/getBillType'
    // import { formatSearchBillDate } from '../utils/common';
    export default {
        components: {
            slideTab,
            empty
        },
        data() {
            return {
                stampPass: require('../img/stamp-complete.png'),
                stampFail: require('../img/stamp-abandon.png'),
                list: [],
                originalData: [],
                showType: 1,
                empty1: false,
                empty2: false,
                empty3: false,
                empty4: false,
                empty5: false,
                empty6: false,
                start: new Date().getTime()
            };
        },
        computed: {
            ...mapState(['userNum', 'userInfo'])
        },
        created() {
            this.initData();
        },
        methods: {
            // getBillIcon (billNum) {
            //     let JM = getJMByBillNum(billNum);
            //     let billConfig =
            // },
            isHide() {
                var data1 = document.querySelectorAll('.data1');
                var data2 = document.querySelectorAll('.data2');
                var data3 = document.querySelectorAll('.data3');
                var data4 = document.querySelectorAll('.data4');
                var data5 = document.querySelectorAll('.data5');
                var data6 = document.querySelectorAll('.data6');

                if (!data1 || data1.length === 0) {
                    this.empty1 = true;
                } else {
                    this.empty1 = false;
                }
                if (!data2 || data2.length === 0) {
                    this.empty2 = true;
                } else {
                    this.empty2 = false;
                }
                if (!data3 || data3.length === 0) {
                    this.empty3 = true;
                } else {
                    this.empty3 = false;
                }
                if (!data4 || data4.length === 0) {
                    this.empty4 = true;
                } else {
                    this.empty4 = false;
                }
                if (!data5 || data5.length === 0) {
                    this.empty5 = true;
                } else {
                    this.empty5 = false;
                }
                if (!data6 || data6.length === 0) {
                    this.empty6 = true;
                } else {
                    this.empty6 = false;
                }
            },
            getexpanseName(name, expenseType) {
                switch (expenseType) {
                case 'car': name = '车辆费报销单';
                    break;
                case 'bus': name = '交通费报销单';
                    break;
                case 'tel': name = '通讯费报销单';
                    break;
                case 'other': name = '其他费用报销单';
                    break;
                }
                return name;
            },
            getBillIcons(name, expenseType) {
                if (expenseType) {
                    name = this.getexpanseName(name, expenseType);
                }
                return this.BILLICONS[name];
            },
            // type-1 显示半年 type-2 显示全部
            changeShowType (type) {
                this.$store.commit('isLoading', true);
                setTimeout(() => {
                    this.$store.commit('isLoading', false);
                }, 333);
                if (type === 1) {
                    let date1 = moment().add(-60, 'days').format('YYYYMMDD');
                    let list = this.originalData.filter(item => {
                        let billDate = item.billDate || item.FBILLDATE || '1';
                        console.log(billDate);
                        let date2 = billDate.substring(0, 10).replace(/-/g, '');
                        return (+date2) - (+date1) > 0;
                    });
                    if (list.length === 0) {
                        this.showType = 2;
                        this.list = this.originalData;
                    } else {
                        this.list = list;
                    }
                } else {
                    this.showType = 2;
                    this.list = this.originalData;
                }
            },
            initData () {
                let locData = sessionStorage.getItem('baoxiaoData') || localStorage.getItem('baoxiaoData');
                // 优先显示缓存
                if (locData) {
                    let arr = JSON.parse(locData);
                    this.originalData = quickSort(arr, 'billDate', 'FBILLDATE', false);
                    this.changeShowType(1);
                }
                this.getBaoxiao(1);
            },
            // 获取并且缓存单据
            getAndSaveBill (type, methodArr, cb) {
                let allLen = methodArr.length;
                let date1 = moment().add(-60, 'days').format('YYYY-MM-DD');
                let date2 = moment().add(1, 'days').format('YYYY-MM-DD');
                let requestArr = [];
                for (let i = 0; i < allLen; i++) {
                    let method = methodArr[i];
                    let url = this.HOST + '?method=' + method + '&userNum=' + this.userNum + '&unumber=' + this.userNum;
                    if (type === 1) {
                        url += `&bizDate=${JSON.stringify([date1, date2])}`;
                    }
                    requestArr.push(axios.get(url));
                }
                if (type === 2) this.$store.commit('isLoading', true);
                axios.all(requestArr)
                .then(axios.spread((res1, res2, res3, res4, res5) => {
                    let allData = [].concat(res1, res2, res3, res4, res5);
                    if (allData.length === 0) {
                        return this.getBaoxiao(2);
                    }
                    this.originalData = quickSort(allData, 'billDate', 'FBILLDATE', false);
                    this.changeShowType(type);
                    sessionStorage.setItem('baoxiaoData', JSON.stringify(allData));
                    localStorage.setItem('baoxiaoData', JSON.stringify(allData));
                }));

                // for (let i = 0; i < allLen; i++) {
                //     let method = methodArr[i];
                //     let url = this.HOST + '?method=' + method + '&userNum=' + this.userNum + '&unumber=' + this.userNum;
                //     if (type === 1) {
                //         url += `&bizDate=${JSON.stringify([date1, date2])}`;
                //     }
                //     (method => {
                //         this.$http.get(url).then(res => {
                //             loadLen++;
                //             let list = res.data.t || [];
                //             cb(method, list, loadLen, allLen);
                //         });
                //     })(method);
                // }
            },
            getBaoxiao (type) {
                let methodArr = ['getBizAccountBills', 'getComputerAccounts', 'listTravelBillWK', 'getContractPayments', 'getNoContractPayments'];
                let allData = [];
                this.getAndSaveBill(type, methodArr, (method, list, loadLen, allLen) => {
                    // console.log(loadLen, method, list);
                    allData = allData.concat(list);
                    sessionStorage.setItem(method, JSON.stringify(list));
                    localStorage.setItem(method, JSON.stringify(list));
                    if (loadLen === allLen) {
                        // console.log('已经加载完所有报销单');
                        this.originalData = quickSort(allData, 'billDate', 'FBILLDATE', false);
                        this.changeShowType(type);
                        sessionStorage.setItem('baoxiaoData', JSON.stringify(allData));
                        localStorage.setItem('baoxiaoData', JSON.stringify(allData));
                    }
                });
            },
            goToDetail(name, num, cause, state, money, isChailv, icon, expenseType) {
                var billname = name;
                if (isChailv) {
                    billname = '差旅报销单';
                }
                if (expenseType) {
                    billname = this.getexpanseName(name, expenseType);
                }
                window.localStorage.setItem('billname', billname);
                window.localStorage.setItem('cause', cause);
                window.localStorage.setItem('state', state);
                window.localStorage.setItem('money', money);
                window.localStorage.setItem('billicon', icon);

                if (name === '出差申请单') {
                    this.$router.push('/travelbilldetail?billNum=' + num);
                } else {
                    this.$router.push('/billdetail?billNum=' + num);
                }
            },
            gotoComment(num, type) {
                this.$router.push('/comment?billNum=' + num + '&type=' + type);
            },
            states(text, state, date) {
                var arr = [];
                if (text === '未发') {
                    arr = ['20', '25'];// '暂存', '已提交未发k2'
                } else if (text === '审批中') {
                    arr = ['30', '145', '305']; // '业务审批中', '审核中', '共享打回'
                } else if (text === '待付款') {
                    arr = ['60', '65', '300', '210', '205']; // '审核通过', '等待付款', '未付款', '已退票', '已打回'
                } else if (text === '已付款') {
                    arr = ['70', '45', '80']; // '已付款', '已生成凭证', '已关闭'
                } else if (text === '待评价') {
                    arr = ['45', '60', '65', '70', '80']; // '审核通过', '等待付款', '已付款', '已生成凭证', '已关闭'
                }
                if (date) {
                    if (date > '2017-08-30' && arr.indexOf(state) !== -1) {
                        return true;
                    } else {
                        return false;
                    }
                }

                if (arr.indexOf(state) !== -1) {
                    return true;
                } else {
                    return false;
                }
            },
            onTab(index) {
                if (this.list.length === 0) {};
                this.$router.replace('/mybaoxiao?index=' + index);
            }
        },
        updated() {
            // 是否显示空提示
            this.isHide();
        }
    };
</script>

<style lang="less" scoped src="../css/bill.less"></style>
